<?php

if (isset($_GET['data'])) {
    $data = $_GET['data'];
} else {
    $data = '{"bgItem":{"type":"bg","color":"rgba(227, 251, 231, 1)","height":750},"nodeItem":[{"width":750,"height":226,"top":699,"left":0,"nodeIndex":1,"type":"product","info":"1,2,3,4,5,6,7","element":2,"oldElement":2,"position":1,"positionX":0,"positionY":463,"zIndex":0},{"width":602,"height":462,"top":236,"left":0,"nodeIndex":2,"type":"image","src":"","href":"","element":"body","oldElement":"body","position":2,"positionX":0,"positionY":52,"zIndex":2}]}';
}
$data = json_decode($data, true);

foreach ($data['nodeItem'] as $key => $val) {
    //产品相关且有产品相关信息
    if ($val['type'] == 'product') {
        $data['nodeItem'][$key]['productInfo'] = [];
        if ($val['info']) {
            $productIdsArr = explode(',', $val['info']);
            //模拟通过产品id循环赋值
            foreach ($productIdsArr as $k3 => $v3) {
                $data['nodeItem'][$key]['productInfo'][] = [
                    'product_id' => "1",
                    'head_pic_url' => "",
                    'product_title' => "立普妥 阿托伐他汀钙片 20mg×7片",
                    'store_price' => "45.00",
                    'market_price' => "71.00"
                ];
            }
        }
    }
}
$data = json_encode($data);
?>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0,viewport-fit=cover">
</head>
<style>
    #Cbody {
        width: 7.5rem
    }

    * {
        margin:0
    }
    .productitem ul li {
        background: #fff;
        width: 47%;
        border-radius: 0.10rem 0.10rem;
        overflow: hidden;
        padding-bottom: 0.1rem;
    }

    .productitem ul li .list_box {
        position: relative;
        width: 3.4rem;
        height: 3.4rem;
    }

    .productitem ul li .list_box .box_img {
        width: 100%;
        box-sizing: border-box;
    }

    .productitem li p {
        color: #333;
        margin-bottom: 0;
        padding: 0 0.05rem;
        font-size: 0.2rem;
        line-height: 0.3rem;
        margin: 0;
    }

    .productitem li p.name {
        height: 0.60rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 0.06rem;
    }

    .productitem li .one_price {
        font-size: 0.16rem;
        color: #f64d00;
        font-weight: bold;
    }

    .productitem li .cp-yj-p {
        font-size: 0.14rem;
        color: #999;
        text-decoration: line-through;
    }

    .productitem {
        padding: 0 0.08rem;
        padding-bottom: 0.10rem;
    }

    .productitem ul {
        padding: 0 0.05rem;
        background: #fff;
        border-radius: 0 0 0.10rem 0.10rem;
        border-top: none;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
</style>

<body id="body">
    <div id="Cbody">
        <div id="warp"></div>
    </div>
</body>
<script>
    produtLiHeight = 449
    //渲染组件 
    render = {
        //初始化
        init: function() {
            //后台传的data值
            let data = <?php echo $data ?>;
            //body的高值
            bodyHeight = data.bgItem.height;

            document.body.style.backgroundColor = data.bgItem.color

            // 渲染div
            this.dealRender(data['nodeItem'])
            //px转rem
            this.dealPx2rem(data['nodeItem'])
        },
        //渲染div 
        dealRender: function(data) {
            //已存在node
            let haveNode = ['body'];
            let bodyNode = document.getElementById("warp");
            let html = '';
            while (data.length > 0) {
                //未参与渲染的节点
                let tmp = []
                for (let i = 0; i < data.length; i++) {
                    //判断当前节点的相对节点是否已存在
                    if (haveNode.indexOf(data[i]['element']) >= 0) {
                        //当前node节点push进去
                        haveNode.push(data[i].nodeIndex)
                        if (data[i]['type'] == 'image') {
                            //渲染图片
                            html += this.renderImage(data[i])
                        } else if (data[i]['type'] == 'product') {
                            //渲染产品
                            html += this.renderProduct(data[i])
                        }
                        bodyNode.innerHTML = html
                    } else {
                        tmp.push(data[i])
                    }
                }
                data = tmp
            }
        },

        //渲染图片组件 
        renderImage: function(data) {
            let style = '';
            style = this.getPosition(data);
            return `<div id="node` + data.nodeIndex + `" style="` + style + `" >
                        <a href="` + data.href + `">
                            <img src="` + data.src + `" width="100%" height="100%"/>
                        </a>
                    </div>`
        },
        //渲染产品组件
        renderProduct: function(data) {
            let style = '';
            style = this.getPosition(data);
            let productInfo = data.productInfo
            let html = '';
            html += `<div id="node` + data.nodeIndex + `" style="` + style + `" class="productitem"><ul>`;
            for (let i = 0; i < productInfo.length; i++) {
                html += `<li>
                                <a href="/product/` + productInfo[i]['product_id'] + `.html">
                                    <div class="list_box">
                                        <img class="box_img lazy"
                                            src="` + productInfo[i]['head_pic_url'] + `"
                                            data-original="` + productInfo[i]['head_pic_url'] + `"
                                            style="display: inline;">
                                    </div>
                                </a>
                                <div>
                                    <p class="name ovH">` + productInfo[i]['product_title'] + `</p>
                                    <p class="plr5 ovH">
                                        <span class="one_price">￥<b>` + productInfo[i]['store_price'] + `</b></span> <span class="mbflk_spxq_Vip_jb_money cp-yj-p">
                                            <em class="">¥</em>` + productInfo[i]['market_price'] + ` </span>
                                    </p>
                                </div>
                            </li>`;
            }
            html += `</ul></div>`;
            return html;
        },
        //获取定位
        getPosition: function(data) {
            let style, top, left, width, height = 0;
            if (data.element == 'body') {
                top = 0;
                left = 0;
                width = 750;
                height = bodyHeight;
            } else {
                //相对节点对应的值
                elementNode = document.getElementById("node" + data.element)
                top = elementNode.offsetTop;
                left = elementNode.offsetLeft;
                width = elementNode.offsetWidth;
                height = elementNode.offsetHeight;
            }
            //相对其他元素定位
            switch (data.position) {
                case 1: //左上
                    //左
                    left = left + data.positionX;
                    //上
                    top = top + data.positionY;
                    break;
                case 2: //左下
                    //左
                    left = left + data.positionX;
                    //下
                    top = top + height + data.positionY;
                    break;
                case 3: //右上
                    //右
                    left = left + width + data.positionX;
                    //上
                    top = top + data.positionY;
                    break;
                case 4: //右下
                    //右
                    left = left + width + data.positionX;
                    //下
                    top = top + height + data.positionY;
                    break;
            }
            if (data.type == 'product') {
                //因渲染速度问题,会导致获取高度的时候出现问题,所以计算出固定高度(之后用rem处理)
                //宽 = 750的时候,li 高度是固定值produtLiHeight
                height = Math.ceil(data.productInfo.length / 2) * produtLiHeight
                return style = "position: absolute;width:730;height:" + height + ";z-index:" + data.zIndex + ";top:" + top + ";left:0";
            } else {
                return style = "position: absolute;z-index:" + data.zIndex + ";width:" + data.width + ";height:" + data.height + ";top:" + top + ";left:" + left;
            }
        },
        //所有组件处理px转rem
        dealPx2rem: function(data) {
            for (let i = 0; i < data.length; i++) {
                //将px换成rem
                this.px2rem(data[i].nodeIndex)
            }
        },
        //处理px转rem
        px2rem: function(nodeIndex) {
            node = document.getElementById("node" + nodeIndex)

            node.style.top = node.offsetTop / 100 + 'rem';
            node.style.left = node.offsetLeft / 100 + 'rem';
            node.style.width = node.offsetWidth / 100 + 'rem'
            node.style.height = node.offsetHeight / 100 + 'rem'
        }
    }
    render.init()
</script>

<script>
    /* eslint-disable */
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    // 这里在375的设备上1rem = 20px，在其他屏幕宽的时候会自动根据这个比例来动态调整
</script>

</html>